<template>
  <div class="i-table-no-border">
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      height='500'
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="categoryProductType">
        <span v-if="row.categoryProductType === '1'">危化品</span>
        <span v-if="row.categoryProductType === '2'">管制刀具</span>
        <span v-if="row.categoryProductType === '3'">非限制</span>
      </template>
      <template slot-scope="{ row }" slot="categoryType">
        <span v-if="row.categoryType === '1'">产品使用</span>
        <span v-if="row.categoryType === '2'">供应商使用</span>
        <span v-if="row.categoryType === '3'">产品/供应商共用</span>
      </template>
      <template slot-scope="{ row }" slot="isPriceSensitive">
        <span v-if="row.isPriceSensitive === '1'">是</span>
        <span v-if="row.isPriceSensitive === '2'">否</span>
      </template>
      <template slot-scope="{ row }" slot="isMetal">
        <span v-if="row.isMetal === '1'">是</span>
        <span v-if="row.isMetal === '2'">否</span>
      </template>
      <template slot-scope="{ row }" slot="state">
        <span v-if="row.state === '1'">启用</span>
        <span v-if="row.state === '2'">未启用</span>
      </template>
      <template slot-scope="{ row }" slot="reviewState">
        <span v-if="row.reviewState === '2'">审核通过</span>
        <span v-else-if="row.reviewState === '3'">审核未通过</span>
        <span v-else>未审核</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <table-actions
          :requestApi="listData.requestApi"
          :basePath="basePath"
          :rowData="row"
          :indexData="index"
          @actionsChange="getData"
        ></table-actions>
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        show-total
        show-sizer
        transfer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码
import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
import tableActions from './tableActions'; // 表格操作项
import tableBtns from './tableBtns'; // 表格内部操作按钮
export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ])
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableActions,
    tableBtns
  },
  data () {
    return {
      util: util,
      basePath: this.dynamicData.basePath // 拼接基础路径
    };
  },
  created () {},
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),
    // 获取表格的数据
    getData () {
      this.selectedData = [];
      let searchParam = [];
      if (!this.searchFormData?.reviewState) {
        this.searchFormData.reviewState = '2,3'
      }
      Object.keys(this.searchFormData).forEach(key => {
        searchParam.push({
          name: key,
          value: this.searchFormData[key]
        });
      });
      Object.keys(this.searchFormDataQ).forEach(key => {
        searchParam.push({
          name: key,
          value: this.searchFormDataQ[key]
        });
      });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam)
      };

      this.loading = true;
      // 开始请求列表
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        data
      ).then(res => {
        /* let rData = res;
        if (rData.retData !== '') {
          rData.retData = rData.retData;
        }

        let tableDataList = rData.retData.results;
        tableDataList.forEach(item => {
          let actions = [];
          // if(item.editStatus==='2'){
          //     actions.push({
          //         name: 'Edit',
          //         label: '编辑',
          //         handleType: 'link'
          //     })
          // }

          actions.push({
            name: 'Delete',
            label: '删除',
            handleType: 'link'
          });

          actions.push({
            name: 'View',
            label: '查看',
            handleType: 'link'
          });
          actions.push({
            name: 'ReAudit',
            label: '重新编辑',
            handleType: 'link'
          });
          // if (item.levelNum === '4') {
          //     actions.push({
          //         name: 'Copy',
          //         label: '复制',
          //         handleType: 'link'
          //     })
          // }
          // actions.push({
          //     name: 'Delete',
          //     label: '删除',
          //     handleType: 'link'
          // })
          item.actions = actions;
        });
        // 增加表格操作项
        this.tableDataList = rData.retData.results;
        this.totalNum = rData.retData.totalNum;
        this.loading = false; */
        const successBtns = [{
          name: 'View',
          label: '查看',
          handleType: 'link'
        }]
        const failBtns = [
          {
            name: 'Delete',
            label: '删除',
            handleType: 'link'
          },
          {
            name: 'View',
            label: '查看',
            handleType: 'link'
          },
          {
            name: 'ReAudit',
            label: '重新编辑',
            handleType: 'link'
          }
        ]
        const emptyBtns = [
          {
            name: '',
            label: '',
            handleType: ''
          }
        ]
        const BtnsMaps = {
          '2': successBtns,
          '3': failBtns
        }
        this.loading = false
        if (res?.retData) {
          const { results = [], totalNum } = res.retData
          this.tableDataList = results.map(item => ({
            ...item,
            _disabled: item.reviewState == '2',
            actions: BtnsMaps[item.reviewState] ?? emptyBtns
          }))
          this.totalNum = totalNum
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}

.height30 {
  height: 30px;
  line-height: 30px;
}
</style>
